<template>
  <el-card style="height: 100%">
    <el-divider content-position="left">就诊详情</el-divider>
    <el-card
      style="float: left; width: 40%; margin-right: 20px"
      shadow="hover"
    ><el-form :inline="true" :model="form" class="demo-form-inline">
       <el-form-item label="挂号单号">
         <el-input v-model="form.registerId" placeholder="挂号单号" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
       </el-form-item>
     </el-form>
      <el-table
        :data="registertableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column property="register_id" label="挂号单号" width="140" />
        <el-table-column property="register_date" label="挂号日期" width="120" />
        <el-table-column
          property="doctor_name"
          label="医生姓名"
          width="120"
        />
        <el-table-column property="register_department" label="挂号科室" />
      </el-table>
    </el-card>
    <div style="height: 750px; width:1000px" class="row">
      <div>
        <div style="font-size: 20px; font-weight: 800; margin:0px 0px 20px 14px;">
          取药窗口
        </div>
        <div v-if="medicineListVisible===true" class="medicine-list">
          <div v-for="medicine in medicineList" :key="medicine.medicineName" class="medicine-list-item">
            <div class="medicine-card">
              <div class="medicine-title">
                <div class="medicine-name">{{ medicine.medicineName }}</div>
                <div class="metering">
                  <div>
                    <span class="metering-times">
                      一共{{ medicine.dosing.split("*")[2] }}盒
                    </span>
                  </div>
                </div>
              </div>
              <div class="window-box column">
                <div class="window-type">
                  {{ medicine.window.split('-')[0] }}
                </div>
                <div class="window">
                  <span>{{ medicine.window.split('-')[1] }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div style="width:100%; font-size: 20px; font-weight: 800; margin:0px 0px 40px 14px; justify-content:space-between" class="row">
          <div>
            <span>输液座位表</span>
          </div>
          <div style="margin-right:24px">
            <span class="iconfont free" style="font-size: 20px;">&#xe601;</span> 空位置
            <span class="iconfont seated" style="font-size: 20px;">&#xe601;</span> 已占据
            <span class="iconfont user-seat" style="font-size: 20px;">&#xe601;</span> 你的位置
          </div>
        </div>
        <div v-if="medicineListVisible===true" class="seat-list column">
          <div v-for="(row, rowIndex) in seatList" :key="rowIndex" class="seat-row row">
            <div v-for="(seat, colIndex) in row" :key="colIndex" class="seat">
              <div :class="'iconfont' + ' ' + seatFill(seat)">&#xe601;</div>
              <span :class="'seat-index' + ' ' + seatFill(seat)">{{ (rowIndex+1)+"-"+(colIndex+1) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { getRegisterInfo } from '@/api/registerInfo'
// import { getRegisterInfo, selectRegisterInfo } from '../../src/api/registerInfo'
// import { selectPayInfo } from '../../src/api/payInfo'

const medicineList = [
  { medicineName: '阿莫西林', window: '西药区-1', dosing: '7*3*3', count: 3 },
  { medicineName: '毓婷', window: '西药区-3', dosing: '4*2*3', count: 2 },
  { medicineName: '666粉', window: '西药区-9', dosing: '4*3*2', count: 4 },
  { medicineName: '灵芝', window: '中药区-1', dosing: '10*3*3', count: 10 },
  { medicineName: '当归', window: '中药区-8', dosing: '11*1*2', count: 2 },
  { medicineName: '人参', window: '中药区-11', dosing: '8*2*3', count: 5 },
  { medicineName: '人参', window: '中药区-11', dosing: '8*2*3', count: 5 },
  { medicineName: '人参', window: '中药区-11', dosing: '8*2*3', count: 5 },
  { medicineName: '人参', window: '中药区-11', dosing: '8*2*3', count: 5 },
  { medicineName: '人参', window: '中药区-11', dosing: '8*2*3', count: 5 },
  { medicineName: '人参', window: '中药区-11', dosing: '8*2*3', count: 5 },
  { medicineName: '人参', window: '中药区-11', dosing: '8*2*3', count: 5 }
]
const seatList = [
  [0, 1, 0, 0, 1],
  [0, 1, 0, 0, 0],
  [1, 0, 2, 1, 0],
  [1, 1, 0, 0, 1],
  [0, 1, 1, 1, 0]
]
export default {
  name: 'PageThree',
  data() {
    return {
      symptom: '',
      check_result: '',
      registerDate: '',
      registertableData: [],
      payInfotableData: [],
      medicineList,
      seatList,
      medicineListVisible: false,
      seatListVisible: false,
      form: {
        registerId: ''
      }
    }
  },
  created() {
    this.getRegisterInfo()
  },
  methods: {
    async getRegisterInfo() {
      const data = await getRegisterInfo()
      // console.log(data);
      this.registertableData = data.data.message
      this.registertableData.forEach((item) => {
        item.register_date = item.register_date.slice(0, 10)
      })
    },
    handleCurrentChange(val) {
      this.form.registerId = val.register_id
      this.registerDate = val.register_date
    },
    // 提交挂号表单
    async onSubmit() {
      this.medicineListVisible = true
      this.seatListVisible = true
      // if ((this.form.registerId ?? "") !== "") {
      //   //获取挂号相关就诊信息
      //   const registerInfo = await selectRegisterInfo({
      //     ...this.form,
      //   });
      //   this.symptom = registerInfo.data.message[0].symptom;
      //   this.check_result = registerInfo.data.message[0].check_result;
      //   //获取挂号相关支付信息
      //   const payInfo = await selectPayInfo({
      //     ...this.form,
      //   });
      //   if (payInfo.data.message.length === 0) {
      //     this.payInfotableData = [];
      //   } else {
      //     this.payInfotableData = JSON.parse(
      //       payInfo.data.message[0].payInfo
      //     ).projectList;
      //   }
      // } else {
      //   this.$message({
      //     showClose: true,
      //     message: "输入框不能为空喔",
      //     type: "warning",
      //   });
      // }
    },
    seatFill(flag) {
      switch (flag) {
        case 0:
          return 'free'
          // break
        case 1:
          return 'seated'
          // break
        case 2:
          return 'user-seat'
          // break
        default:
          return 'free'
          // break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

<style lang="scss">
@font-face {
  font-family: 'iconfont';  /* Project id 3366926 */
  src: url('//at.alicdn.com/t/font_3366926_1bvfuwtgy9y.woff2?t=1652430050094') format('woff2'),
      url('//at.alicdn.com/t/font_3366926_1bvfuwtgy9y.woff?t=1652430050094') format('woff'),
      url('//at.alicdn.com/t/font_3366926_1bvfuwtgy9y.ttf?t=1652430050094') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.medicine-list {
  display: flex;
  width: 400px;
  flex-wrap: wrap;
  padding-top: 20px;
  height: 680px;
  overflow: scroll;
  .medicine-list-item {
    margin-left: 20px;
    .medicine-card:hover {
      transform: scale(1.1);
      box-shadow: #0000001a 5px 5px 14px;
    }
    .medicine-card {
      display: flex;
      box-sizing: border-box;
      width: 160px;
      height: 200px;
      overflow: hidden;
      flex-direction: column;
      align-items: center;
      background-color: #3154c2;
      border-radius: 10px;
      margin-bottom: 40px;
      font-weight: 800;
      box-shadow: #0000001a 5px 5px 10px;
      transition: all 0.2s ease-in-out;
      .medicine-title {
        width: 160px;
        height: 60px;
        box-sizing: border-box;
        padding: 10px;
        text-align: center;
        background-color: #fbfbfb;
        color: #393939;
        .medicine-name {
        font-size: 24px;
        }
        .metering {
        font-size: 14px;
        margin-top: 6px;
        }
      }
      .window-box {
        box-sizing: border-box;
        padding: 10px;
        color: #f0f0f0;
        .window-type {
          font-size: 16px;
        }
        .window {
          margin-top: 10px;
          span {
            font-size: 90px;
          }
        }
      }

    }
  }
}
.medicine-list::-webkit-scrollbar {
      width: 0 !important;
}

.seat-list {
  width: 600px;
  .seat-row {
    .seat {
      font-size: 20px;
      margin-left: 10px;
      margin-bottom: 14px;
      transition: all 0.1s ease-in-out;
      cursor: pointer;
      div {
        font-size: 90px;
        color: #d6d6d6;
      }
      .seat-index {
        display: block;
        text-align: center;
        margin-top: 6px;
        font-weight: 600;
        color: #bcbcbc;
      }
    }
    .seat:hover {
      transform: scale(1.2);
    }
  }
}
.free {
  color: #bcbcbc !important;
}
.seated {
  color: #3154c2 !important;
}
.user-seat {
  color: #f37236 !important;
}
</style>
<style lang="scss">
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }
  .column {
    display: flex;
    flex-direction: column;
  }
  .column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }
</style>
